<template>
  <div class="label-container">
    <div class="label-title">相关推荐</div>
    <ul>
      <li v-for="item in data" :key="item.blogId" @click="onEnterToDetail(item.blogId)">
        <div class="item-info">{{item.blogName}}</div>
      </li>
    </ul>
  </div>
</template>

<script>

// import { getNoticeList, createNotice, deleteNotice } from '../../api';

export default {
  name: 'RecommendList',
  components: {},
  props: {
    data: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
     
    };
  },
  computed: {
    
  },
  methods: {
    onEnterToDetail(blogId) {
      window.open(`${window.location.origin}/main/detail?blogId=${blogId}`);
    }
  },
  mounted() {
   
  },
  beforeDestroy() {
    
  },
}
</script>

<style lang="scss" scoped>
  .label-container {
    background-color: #fff;
    border-radius: 5px;
    overflow: hidden;

    .label-title {
      font-size: 16px;
      font-weight: bold;
      padding: 0 16px;
      line-height: 40px;
      border-bottom: 1px solid #f0f0f0;
    }

    ul {
      padding-left: 20px;
    }

    li {
      line-height: 30px;
      font-size: 13px;
      border-bottom: 1px dashed #f0f0f0;
      list-style: disc;
    }

    li:last-child {
      border-bottom: 0;
    }

    .item-info {
      cursor: pointer;
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
      &:hover {
        color: #009a61;
        text-decoration: underline;
      }
    }
  }
</style>
